<div class="{{prefixCls}}-notice"
  [@enterLeave]="apesMessage.state"
  (mouseenter)="onEnter()"
  (mouseleave)="onLeave()">
  <div class="{{prefixCls}}-notice-content">
    <div class="{{prefixCls}}-custom-content" [ngClass]="prefixCls + '-' + apesMessage.type">
      <ng-container [ngSwitch]="apesMessage.type">
        <i *ngSwitchCase="'success'" apes-icon [apesType]="'check-circle'"></i>
        <i *ngSwitchCase="'info'" apes-icon [apesType]="'info-circle'"></i>
        <i *ngSwitchCase="'warning'" apes-icon [apesType]="'exclamation-circle'"></i>
        <i *ngSwitchCase="'error'" apes-icon [apesType]="'close-circle'"></i>
        <i *ngSwitchCase="'loading'" apes-icon [apesType]="'loading'"></i>
      </ng-container>
      <span [innerHTML]="apesMessage.content"></span>
    </div>
  </div>
</div>
